<template>
	<div class="box">
		<el-card class="box-card">
			<div v-if="!isShow">
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="属性名称：">
						<el-input v-model="formInline.name" placeholder="请输入属性名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
						<el-button type="primary" @click="clear" icon="el-icon-delete">清空</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div style="margin-bottom: 1.25rem; display: flex; justify-content: space-between">
				<div>
					<el-button type="primary" size="medium" icon="el-icon-plus" @click="add">新增</el-button>
				</div>
				<div style="display: flex" @click="getList">
					<div class="circle">
						<i class="el-icon-refresh"></i>
					</div>
					<div class="circle" @click="isShow = !isShow">
						<i class="el-icon-search"></i>
					</div>
				</div>
			</div>
			<div>
				<el-table
					border
					:data="tableData"
					stripe
					style="width: 100%"
					:header-cell-style="{ 'text-align': 'center' }"
					:cell-style="{ 'text-align': 'center' }">
					<el-table-column type="index" width="50" label="序号"> </el-table-column>
					<el-table-column prop="propName" label="属性名称"> </el-table-column>
					<el-table-column label="属性值">
						<template slot-scope="scope">
							<el-tag
								style="margin-right: 10px"
								v-for="(item, index) in scope.row.prodPropValues"
								:key="index"
								>{{ item.propValue }}</el-tag
							>
						</template>
					</el-table-column>
					<el-table-column prop="address" label="操作" width="350">
						<template slot-scope="scope">
							<el-button
								size="mini"
								type="primary"
								@click="edit(scope.$index, scope.row)"
								icon="el-icon-edit"
								>编辑</el-button
							>
							<el-button
								size="mini"
								type="danger"
								@click="Delete(scope.$index, scope.row)"
								icon="el-icon-delete"
								>删除</el-button
							>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div style="margin-top: 1.25rem; text-align: right">
				<el-pagination
					@size-change="handleSizeChange"
					background
					@current-change="handleCurrentChange"
					:current-page="current"
					:page-sizes="[10, 20, 30, 40, 50, 100]"
					:page-size="size"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
				</el-pagination>
			</div>
		</el-card>
		<div>
			<el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
				<div>
					<el-table
						:data="tableList"
						style="width: 100%"
						border
						:header-cell-style="{ 'text-align': 'center' }">
						<el-table-column label="属性名称">
							<template slot-scope="">
								<el-input
									type="text"
									placeholder="请输入内容"
									v-model="tableList.propName"
									maxlength="10"
									show-word-limit></el-input>
							</template>
						</el-table-column>
						<el-table-column label="属性值">
							<template slot-scope="">
								<el-tag
									style="width: 40%; margin-right: 20px; margin-bottom: 10px"
									:key="tag"
									v-for="tag in dynamicTags"
									closable
									:disable-transitions="false"
									@close="handleClose(tag)">
									{{ tag }}
								</el-tag>
								<el-input
									class="input-new-tag"
									v-if="inputVisible"
									v-model="tableList.propValue"
									ref="saveTagInput"
									size="small"
									maxlength="20"
									@keyup.enter.native="handleInputConfirm"
									@blur="handleInputConfirm"
									style="width: 100px">
								</el-input>
								<el-button v-else class="button-new-tag" size="small" @click="showInput">
									<i class="el-icon-plus"></i>
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="confirm">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import { getList, add, update, del, search } from "@/views/table/specification/api/index";
export default {
	data() {
		return {
			formInline: {
				name: "",
			},
			tableData: [
				{
					date: "2016-05-02",
					name: "王小虎",
					address: "上海市普陀区金沙江路 1518 弄",
				},
				{
					date: "2016-05-04",
					name: "王小虎",
					address: "上海市普陀区金沙江路 1517 弄",
				},
				{
					date: "2016-05-01",
					name: "王小虎",
					address: "上海市普陀区金沙江路 1519 弄",
				},
				{
					date: "2016-05-03",
					name: "王小虎",
					address: "上海市普陀区金沙江路 1516 弄",
				},
			],
			name: "",
			current: 1,
			size: 10,
			isShow: false,
			dialogVisible: false,
			text: "",
			total: null,
			tableList: [
				{
					propName: "",
					propValue: "",
				},
			],
			dynamicTags: ["123", "321", "111"],
			inputVisible: false,
			title: "添加",
		};
	},
	created() {
		this.getList();
	},
	methods: {
		getList() {
			this.tableData = [];
			let t = Date.now();
			console.log(t);
			let current = this.current;
			let size = this.size;
			getList({
				t: t,
				current: current,
				size: size,
			}).then((res) => {
				console.log(res);
				this.tableData = res.data.records;
				this.total = res.data.total;
			});
		},
		clear() {
			this.formInline.name = "";
			this.getList();
		},
		search(name) {
			search({
				current: this.current,
				size: this.size,
				propName: name,
			}).then((res) => {
				this.tableData = res.data.records;
				this.total = res.data.total;
			});
		},
		onSubmit() {
			console.log("submit!");
			this.name = JSON.parse(JSON.stringify(this.formInline.name));
			this.search(this.name);
		},
		Delete(index, row) {
			console.log(index, row);
			let id = row.propId;
			this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					del(id).then((res) => {
						console.log(res);
						this.$message({
							type: "success",
							message: "删除成功!",
						});
						this.getList();
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除",
					});
				});
		},
		handleClose(tag) {
			this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
		},
		showInput() {
			this.inputVisible = true;
			this.$nextTick((_) => {});
		},
		add() {
			this.dialogVisible = true;
			this.title = "添加";
			this.tableList = [
				{
					propName: "",
					propValue: "",
				},
			];
			this.dynamicTags = [];
		},
		edit(index, row) {
			this.title = "编辑";
			this.dialogVisible = true;
			console.log(index, row);
			let a = row.prodPropValues;
			let b = [];
			for (let i = 0; i < a.length; i++) {
				b.push(a[i].propValue);
			}
			this.dynamicTags = b;
		},
		confirm() {
			if (this.title == "添加") {
				let dynamicTags = this.dynamicTags;
				if (dynamicTags.length == 0) {
					this.$message({
						message: "请输入属性值",
						type: "warning",
					});
				}
				if (this.tableList.propName == "") {
					this.$message({
						message: "请输入属性名称",
						type: "warning",
					});
				}
				let a = [];
				for (let i = 0; i < dynamicTags.length; i++) {
					if (i == 0) {
						a[i] = {
							valueId: 0,
							propValue: dynamicTags[i],
						};
					} else {
						a[i] = {
							propValue: dynamicTags[i],
						};
					}
				}
				let obj = {
					propName: this.tableList.propName,
					prodPropValues: a,
				};
				add(obj)
					.then((res) => {
						console.log(res);
						this.$message({
							message: "添加成功",
							type: "success",
						});
						this.dialogVisible = false;
						this.getList();
					})
					.catch((err) => {
						console.log(err);
					});
			} else if (this.title == "编辑") {
				let dynamicTags = this.dynamicTags;
				if (dynamicTags.length == 0) {
					this.$message({
						message: "请输入属性值",
						type: "warning",
					});
				}
				if (this.tableList.propName == "") {
					this.$message({
						message: "请输入属性名称",
						type: "warning",
					});
				}
				let a = [];
				for (let i = 0; i < dynamicTags.length; i++) {
					if (i == 0) {
						a[i] = {
							valueId: 0,
							propValue: dynamicTags[i],
						};
					} else {
						a[i] = {
							propValue: dynamicTags[i],
						};
					}
				}
				let obj = {
					propName: this.tableList.propName,
					prodPropValues: a,
				};
				update(obj)
					.then((res) => {
						console.log(res);
						this.$message({
							message: "修改成功",
							type: "success",
						});
						this.dialogVisible = false;
						this.getList();
					})
					.catch((err) => {
						console.log(err);
					});
			}
		},
		// 标签删除
		handleClose(tag) {
			this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
		},
		// 打开输入框
		showInput() {
			this.inputVisible = true;
			this.$nextTick((_) => {
				this.$refs.saveTagInput.$refs.input.focus();
			});
		},
		// 添加标签
		handleInputConfirm() {
			let inputValue = this.tableList.propValue;
			if (inputValue) {
				this.dynamicTags.push(inputValue);
			}
			this.inputVisible = false;
			this.tableList.propValue = "";
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.size = val;
			this.getList();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.current = val;
			this.search(this.name);
		},
	},
};
</script>

<style lang="scss" scoped>
::v-deep .box {
	padding: 0.9375rem;
	background-color: #f0f3f4;
	width: 100%;
}
.circle {
	background-color: #fff;
	border: 1px solid #e4e7ed;
	border-radius: 50%;
	padding: 10px 12px;
	margin-left: 10px;
	cursor: pointer;
}
::v-deep .el-dialog__wrapper {
	background-color: #ffffffdd;
}
</style>
